﻿@using HCMS.Dictionary
@using HCMS.Enum
@model HCMS.Entities.Base.Notice
@{
    Layout = "~/Views/Shared/_Layout_Edit_Pear_Layui.cshtml";
}

<div class="layui-body layui-bg-gray">
    <div class="layui-card">
        <form class="layui-form">
            <input type="hidden" asp-for="Id" name="noticeId" />

            <div class="layui-tab layui-tab-card" lay-filter="tab-filter">
                <ul class="layui-tab-title">
                    <li class="layui-this">接收对象</li>
                    <li>公告信息</li>
                    <li>接收 记录</li>
                </ul>

                <div class="layui-tab-content">
                    <!-- 接收对象 -->
                    <div class="layui-tab-item layui-show">

                        <div class="layui-form-item">
                            <div class="layui-form-label">
                                <input type="checkbox" name="ReceiveType" title="所有人" value="@((int)NoticeReceiveType.ALL)" lay-filter="receiveType-filter" />
                            </div>
                            <div class="layui-input-inline" style="width:250px;">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-form-label">
                                <input type="checkbox" name="ReceiveType" title="指定人员" value="@((int)NoticeReceiveType.Admin)" lay-filter="receiveType-filter" />
                            </div>
                            <div class="layui-input-inline" style="width:250px;">
                                <div id="adminTree"></div>
                                <input type="hidden" id="adminIds" name="adminIds" />
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-form-label">
                                <input type="checkbox" name="ReceiveType" title="指定角色" value="@((int)NoticeReceiveType.Role)" lay-filter="receiveType-filter" />
                            </div>
                            <div class="layui-input-inline" style="width:250px;">
                                <div id="roleTree"></div>
                                <input type="hidden" id="roleIds" name="roleIds" />
                            </div>
                        </div>

                    </div>

                    <!-- 公告信息 -->
                    <div class="layui-tab-item">

                        <div class="layui-form-item">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-form-label content-label" style="width:250px;">
                                @Model.Title
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">内容</label>
                            <div class="layui-form-label content-label" style="width:250px;">
                                @Html.Raw(Model.Content)
                            </div>
                        </div>

                    </div>

                    <!-- 接收记录 -->
                    <div class="layui-tab-item">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div class="layui-form-item layui-inline">
                                    <div class="layui-input-inline layui-form-group">
                                        <select id="receiveSearchName">
                                            <option value="adminName">接收人</option>
                                        </select>
                                        <input type="text" id="receiveSearchKey" placeholder="" class="layui-input layui-form-group-input">
                                    </div>
                                </div>

                                <div class="layui-form-item layui-inline">
                                    <button type="button" class="layui-btn" lay-on="receive-query">
                                        <i class="layui-icon layui-icon-search"></i>
                                        查询
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-primary" lay-on="receive-query-reset">
                                        <i class="layui-icon layui-icon-refresh"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <table id="table_receive_list" lay-filter="table_receive_list"></table>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

            <div class="layui-form-item layui-fixbar btn-fixbar-box">
                <div class="layui-input-block">
                    <vc:menu-submit action-names="@(new string[]{"release"})"></vc:menu-submit>
                    <button type="button" class="layui-btn layui-btn-primary layui-border-red" lay-on="close">
                        <i class="layui-icon layui-icon-close"></i>关闭
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@section Scripts {
    <script>
        var noticeId = '@(Model.Id)';

        layui.use(['form', 'jquery','xmSelect', 'util', 'table'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            var layer = layui.layer;
            var util = layui.util;
            let table = layui.table;
            let element = layui.element;

            adminTree();
            roleTree();
            receiveTypeHandle();
            submitFn();
            receiveLogs();

            // 管理员选择 树
            function adminTree(){
                $.ajax({
                    url: '/notice/alladmin/',
                    type: 'get',
                    success: function (result) {
                        successFn(result);
                    }
                });

                function successFn(data) {
                    var $adminIds = $('#adminIds');

                    xmSelect.render({
                        el: '#adminTree',
                        height: '300px',
                        filterable: true,   // 启用搜索
                        toolbar: {
                            show: true  // 显示工具条
                        },
                        paging: true,   // 启用 分页
                        pageSize: 5,
                        initValue: [],    // 初始化选中值
                        prop: {
                            name: 'name',
                            value: 'id'
                        },
                        data: data,
                        // 选中事件
                        on: function (data) {
                            var ids = [];
                            if (data.arr && data.arr.length > 0) {
                                for (var i = 0; i < data.arr.length; i++) {
                                    ids.push(data.arr[i].id);
                                }
                            }
                            $adminIds.val(ids.join(','));
                        }
                    });
                }
            }

            // 角色选择 树
            function roleTree(){
                $.ajax({
                    url: '/role/alltree/',
                    type: 'get',
                    success: function (result) {
                        successFn(result);
                    }
                });

                function successFn(data) {
                    var $roleIds = $('#roleIds');

                    xmSelect.render({
                        el: '#roleTree',
                        height: '300px',
                        filterable: true,   // 启用搜索
                        toolbar: {
                            show: true  // 显示工具条
                        },
                        paging: true,   // 启用 分页
                        pageSize: 5,
                        initValue: [],    // 初始化选中值
                        prop: {
                            name: 'name',
                            value: 'id'
                        },
                        data: data,
                        // 选中事件
                        on: function (data) {
                            var ids = [];
                            if (data.arr && data.arr.length > 0) {
                                for (var i = 0; i < data.arr.length; i++) {
                                    ids.push(data.arr[i].id);
                                }
                            }
                            $roleIds.val(ids.join(','));
                        }
                    });
                }
            }

            // 接收类型 选择限制
            // 不能同时选中【所有人】和【指定人员、指定角色】
            function receiveTypeHandle(){
                form.on('checkbox(receiveType-filter)',function(data){
                    var elem = data.elem;
                    var checked = elem.checked;
                    var value = elem.value;

                    if(checked){
                        if(parseInt(value) === 1) {   // 全部
                            $('input[name="ReceiveType"][value!="1"]').prop('checked', false);
                        } else {
                            $('input[name="ReceiveType"][value="1"]').prop('checked', false);
                        }
                    }
                });
            }

            // 表单提交
            function submitFn() {
                form.on('submit(release)', function (data) {

                    layer.confirm('确认发布该公告？', {
                      title: '提示',
                      shadeClose: true,
                      btn: ['发布', '再看看']
                    }, function(index){
                        layer.close(index);

                        ajaxFn(data);
                    });

                    return false;
                });

                function ajaxFn(data){
                    // 复选框 必须自己实现，layui 只会提交首个选中的值
                    var receiveType = [];
                    $('input[name="ReceiveType"]:checked').each(function(){
                        receiveType.push($(this).val());
                    });

                    data.field.ReceiveType = receiveType.join(',');

                    var layerIndex = layer.msg('正在发布', {
                      icon: 16,
                      shade: 0.1,
                      time: 0
                    });

                    $.ajax({
                        url: '/notice/release/',
                        type: 'post',
                        dataType: 'json',
                        data: data.field,
                        success: function (result) {
                            if (result.code === 200) {
                                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
                                    parent.layer.close(parent.layer.getFrameIndex(window.name)); // 关闭当前页
                                    parent.layui.table.reload("tableList", {
                                        page: { curr: 1 },
                                    });
                                });
                            } else {
                                parent.layer.msg(result.message, { icon: 2 })
                            }
                        },
                        complete‌: function(){
                            layer.close(layerIndex);
                        }
                    });
                }
            }

            // 接收记录
            function receiveLogs(){
                var tabIndex = [];
                element.on('tab(tab-filter)', function(data){
                    var index = data.index;
                    // tab 事件只执行一次
                    if(tabIndex.indexOf(index) === -1){
                        switch(index){
                            case 2:
                                loadData();
                            break;
                        }

                        tabIndex.push(index);
                    }
                });

                util.on('lay-on', {
                    // 接收记录搜索
                    'receive-query': function () {
                        search();
                    }
                });

                // 加载记录
                function loadData(){
                    table.render({
                        elem: '#table_receive_list',
                        url: '/notice/receivelogs/',
                        method: 'post',
                        where: getQueryParams(),
                        height: 'full',
                        page: true,
                        cols: [[
                            { field: 'adminName', title: '接收人', align: 'center', width: 100 },
                            { field: 'updateTime', title: '接收 时间', align: 'center', width: 160, templet: function (d) { return util.toDateString(d.updateTime); } },
                            { field: 'isRead', title: '阅读 时间', align: 'center', width: 160, templet: function (d) {
                                    if(d.isRead){
                                        return util.toDateString(d.readTime)
                                    } else {
                                        return '未读';
                                    }
                                }
                            },
                            { field: 'createUser', title: '发布者', align: 'center', width: 100 }
                        ]],
                        skin: 'line'
                    });
                }

                // 搜索
                function search() {
                    table.reload('table_receive_list', {
                        where: getQueryParams(),
                        page: {
                            curr: 1
                        }
                    });
                }

                // 搜索条件
                function getQueryParams() {
                    return {
                        fromId: noticeId,
                        searchName: $('#receiveSearchName').val(),
                        searchKey: $('#receiveSearchKey').val()
                    };
                }
            }
        });
    </script>
}